<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <title>添加参会人</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/iconfont.css" rel="stylesheet"/>
    <style>
    	/*.mui-table-view-cell:after{
    		display: none;
    	}*/
    	.mui-btn{
    		padding:10px;
    	}
    	.mui-input-row label{
    		width:45%;
    	}
    	.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
    		width: 55%;
    	}
		.head-img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border:1px solid #999;
			background-color:#eee;
		}
		.mui-content>.mui-table-view:first-child {
		margin-top: 45px;
		}
		.mui-table-view-cell{
			padding: 0 15px;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">添加参会人</h1>
	</header>
	<div class="mui-content">
	    <ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell">
				<div class="mui-input-row">
					<label>姓名</label>
					<input type="text" class="mui-input-clear" placeholder="参会人姓名">
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-input-row">
					<label>性别</label>
					<select >
						<option value="male">男</option>
						<option value="famale">女</option>
					</select>
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-input-row">
					<label>参会类型</label>
					<select >
						<option value="xeushu">学术类型</option>
						<option value="feixue">非学术类型</option>
					</select>
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-input-row">
					<label>单位</label>
					<input type="text" class="mui-input-clear" placeholder="参会人单位名">
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div id="head"  class="mui-input-row">
					<label>头像</label>
					<span class="head">
						<img class="head-img mui-action-preview" id="head-img" src=""/>
					</span>
				</div>
			</li>
		</ul>
		<div class="mui-content-padded">
			<a href="addp.html"><button  class="mui-btn mui-btn-block mui-btn-primary">添加</button></a>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.view.js "></script>
	<script>
		mui.init();		
		//更换头像
		mui(".mui-table-view-cell").on("tap", "#head", function(e) {
			if(mui.os.plus){
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch (b.index) {
						case 0:
							break;
						case 1:
							getImage();
							break;
						case 2:
							galleryImg();
							break;
						default:
							break
					}
				})	
			}
			
		});
		
		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL() + "?version=" + new Date().getTime();
					console.log(s);
					document.getElementById("head-img").src = s;
					//变更大图预览的src
					//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
					document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/head.jpg"
			})
		}

		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("head.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'head.jpg', function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
										document.getElementById("head-img").src = e;
										//变更大图预览的src
										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
										document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'head.jpg', function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
									document.getElementById("head-img").src = path;
									//变更大图预览的src
									//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
									document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};

		function defaultImg() {
			if(mui.os.plus){
				plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
					var s = entry.fullPath + "?version=" + new Date().getTime();;
					document.getElementById("head-img").src = s;
				}, function(e) {
					document.getElementById("head-img").src = 'images/logo.png';
				})
			}else{
				document.getElementById("head-img").src = 'images/logo.png';
			}
			
		}
		function initImgPreview() {
			var imgs = document.querySelectorAll("img.mui-action-preview");
			imgs = mui.slice.call(imgs);
			if (imgs && imgs.length > 0) {
				var slider = document.createElement("div");
				slider.setAttribute("id", "__mui-imageview__");
				slider.classList.add("mui-slider");
				slider.classList.add("mui-fullscreen");
				slider.style.display = "none";
				slider.addEventListener("tap", function() {
					slider.style.display = "none";
				});
				slider.addEventListener("touchmove", function(event) {
					event.preventDefault();
				})
				var slider_group = document.createElement("div");
				slider_group.setAttribute("id", "__mui-imageview__group");
				slider_group.classList.add("mui-slider-group");
				imgs.forEach(function(value, index, array) {
					//给图片添加点击事件，触发预览显示；
					value.addEventListener('tap', function() {
						slider.style.display = "block";
						_slider.refresh();
						_slider.gotoItem(index, 0);
					})
					var item = document.createElement("div");
					item.classList.add("mui-slider-item");
					var a = document.createElement("a");
					var img = document.createElement("img");
					img.setAttribute("src", value.src);
					a.appendChild(img)
					item.appendChild(a);
					slider_group.appendChild(item);
				});
				slider.appendChild(slider_group);
				document.body.appendChild(slider);
				var _slider = mui(slider).slider();
			}
		}
		
		if(mui.os.stream){
			document.getElementById("check_update").display = "none";
		}
		
	</script>	
</body>
</html>